<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:insert="~{include :: header('项目详情')}" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <!-- 左侧：项目基本信息 -->
            <div class="col-sm-8">
                <div class="">
                    <form class="form-horizontal m">
                        <input name="id" type="hidden" th:value="${projectsInfo.id}">
                        <h4 class="form-header h4">项目基本信息</h4>
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">项目名称</label>
                                    <div class="col-sm-8">
                                        <p class="form-control-static" th:text="${projectsInfo.name}"></p>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">项目描述</label>
                                    <div class="col-sm-8">
                                        <div class="form-control-static" th:utext="${projectsInfo.description}"></div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">项目标识</label>
                                    <div class="col-sm-8">
                                        <p class="form-control-static" th:text="${projectsInfo.identifier}"></p>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">项目主页</label>
                                    <div class="col-sm-8">
                                        <p class="form-control-static" th:text="${projectsInfo.homepage}"></p>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">项目状态</label>
                                    <div class="col-sm-8">
                                        <p th:class="${projectsInfo.state == 1 ? 'label label-primary' : 'label label-danger'}" style="padding: 6px 12px;font-size: 14px; line-height: 30px;" th:text="${projectsInfo.state == 1 ? '启用' : '停用'}"></p>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">网站类型</label>
                                    <div class="col-sm-8">
                                        <p class="form-control-static" th:text="${@dict.getLabel('pro_operation_type', projectsInfo.operationType)}"></p>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">开发语言</label>
                                    <div class="col-sm-8">
                                        <p class="form-control-static" th:text="${@dict.getLabels('pro_develop_language', projectsInfo.developLanguage)}"></p>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">签约日期</label>
                                    <div class="col-sm-8">
                                        <p class="form-control-static" th:text="${@tool.dateFormate(projectsInfo.signDate)}"></p>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">续费日期</label>
                                    <div class="col-sm-8">
                                        <p class="form-control-static" th:text="${@tool.dateFormate(projectsInfo.expirDate)}"></p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">客户名称</label>
                                    <div class="col-sm-8">
                                        <p class="form-control-static" th:text="${projectsInfo.customerName}"></p>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">服务器到期</label>
                                    <div class="col-sm-8">
                                        <p class="form-control-static" th:text="${@tool.dateFormate(projectsInfo.serverExpirDate)}"></p>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">签约信息</label>
                                    <div class="col-sm-8">
                                        <p class="form-control-static" th:text="${projectsInfo.signDetail}"></p>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">域名</label>
                                    <div class="col-sm-8">
                                        <div class="form-control-static d-flex align-items-center">
                                            <span th:if="${projectsInfo.domain != null and !projectsInfo.domain.isEmpty()}">
                                                <a th:href="${projectsInfo.domain}" target="_blank" th:text="${projectsInfo.domain}"></a>
                                                <button type="button" class="btn btn-xs btn-default ml-2 copy-btn" th:data-text="${projectsInfo.domain}" title="复制">
                                                    <i class="fa fa-copy"></i>
                                                </button>
                                            </span>
                                            <span th:if="${projectsInfo.domain == null or projectsInfo.domain.isEmpty()}">-</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">后台域名</label>
                                    <div class="col-sm-8">
                                        <div class="form-control-static d-flex align-items-center">
                                            <span th:if="${projectsInfo.adminDomain != null and !projectsInfo.adminDomain.isEmpty()}">
                                                <a th:href="${projectsInfo.adminDomain}" target="_blank" th:text="${projectsInfo.adminDomain}"></a>
                                                <button type="button" class="btn btn-xs btn-default ml-2 copy-btn" th:data-text="${projectsInfo.adminDomain}" title="复制">
                                                    <i class="fa fa-copy"></i>
                                                </button>
                                            </span>
                                            <span th:if="${projectsInfo.adminDomain == null or projectsInfo.adminDomain.isEmpty()}">-</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">静态域名</label>
                                    <div class="col-sm-8">
                                        <div class="form-control-static d-flex align-items-center">
                                            <span th:if="${projectsInfo.htmlDomain != null and !projectsInfo.htmlDomain.isEmpty()}">
                                                <a th:href="${projectsInfo.htmlDomain}" target="_blank" th:text="${projectsInfo.htmlDomain}"></a>
                                                <button type="button" class="btn btn-xs btn-default ml-2 copy-btn" th:data-text="${projectsInfo.htmlDomain}" title="复制">
                                                    <i class="fa fa-copy"></i>
                                                </button>
                                            </span>
                                            <span th:if="${projectsInfo.htmlDomain == null or projectsInfo.htmlDomain.isEmpty()}">-</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">git地址</label>
                                    <div class="col-sm-8">
                                        <div class="form-control-static d-flex align-items-center">
                                            <span th:if="${projectsInfo.gitUrl != null and !projectsInfo.gitUrl.isEmpty()}">
                                                <a th:href="${projectsInfo.gitUrl}" target="_blank" th:text="${projectsInfo.gitUrl}"></a>
                                                <button type="button" class="btn btn-xs btn-default ml-2 copy-btn" th:data-text="${projectsInfo.gitUrl}" title="复制">
                                                    <i class="fa fa-copy"></i>
                                                </button>
                                            </span>
                                            <span th:if="${projectsInfo.gitUrl == null or projectsInfo.gitUrl.isEmpty()}">-</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="hr-line-dashed"></div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">服务器信息</label>
                                    <div class="col-sm-10">
                                        <p class="form-control-static" th:text="${projectsInfo.serverDetail}"></p>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">备注</label>
                                    <div class="col-sm-10">
                                        <p class="form-control-static" th:text="${projectsInfo.remark}"></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            
            <!-- 右侧：项目成员列表 -->
            <div class="col-sm-4">
                <div class="ibox">
                    <div class="ibox-title">
                        <h5>项目成员</h5>
                        <div class="ibox-tools">
                            <span class="label label-primary" th:text="${memberList.size()}"></span>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="team-members" th:if="${memberList != null and !memberList.isEmpty()}">
                            <div class="member-item" th:each="member,iter : ${memberList}" th:classappend="${member.userId == projectsInfo.projectLeader} ? 'project-leader' : 'project-member'">
                                <div class="row">
                                    <div class="col-xs-3">
                                        <div class="member-avatar">
                                            <img th:if="${member.avatar != null and !member.avatar.isEmpty()}" 
                                                 th:src="(${#strings.isEmpty(member.avatar)}) ? @{/img/profile.jpg} : @{${member.avatar}}" 
                                                 th:onerror="'this.src=\'' + @{'/img/profile.jpg'} + '\''"
                                                 class="img-circle img-lg" alt="用户头像">
                                            <i th:unless="${member.avatar != null and !member.avatar.isEmpty()}" 
                                               class="fa fa-user-circle fa-2x" 
                                               th:class="${member.userId == projectsInfo.projectLeader} ? 'text-warning' : 'text-primary'"></i>
                                            <span th:if="${member.userId == projectsInfo.projectLeader}" 
                                                  class="badge badge-warning leader-badge">负责人</span>
                                        </div>
                                    </div>
                                    <div class="col-xs-9">
                                        <div class="member-info">
                                            <strong th:text="${member.userName}"></strong>
                                            <br>
                                            <small th:class="${member.userId == projectsInfo.projectLeader} ? 'text-warning font-weight-bold' : 'text-muted'" 
                                                   th:text="${member.roleName}"></small>
                                            <div th:if="${member.remark != null and !member.remark.isEmpty()}" 
                                                 class="member-remark text-muted small mt-1">
                                                <i class="fa fa-comment-o"></i> 
                                                <span th:text="${member.remark}"></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="hr-line-dashed"></div>
                            </div>
                        </div>
                        <div class="text-center text-muted" th:if="${memberList == null or memberList.isEmpty()}">
                            <i class="fa fa-users fa-3x"></i>
                            <p>暂无项目成员</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 底部：公司列表 -->
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox">
                    <div class="ibox-title">
                        <h5>关联公司</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="table-responsive" th:if="${companieList != null and !companieList.isEmpty()}">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>公司</th>
                                        <th>URL</th>
                                        <th>商家</th>
                                        <th>账号</th>
                                        <th>预估价</th>
                                        <th>实际价</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr th:each="company : ${companieList}">
                                        <td th:text="${company.companyName}"></td>
                                        <td th:text="${company.companyUrl}"></td>
                                        <td th:text="${company.merchantName}"></td>
                                        <td th:text="${company.account}"></td>
                                        <td th:text="${company.estimPrice}"></td>
                                        <td th:text="${company.actualPrice}"></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="text-center text-muted" th:if="${companieList == null or companieList.isEmpty()}">
                            <i class="fa fa-building fa-3x"></i>
                            <p>暂无关联公司</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <th:block th:insert="~{include :: footer}" />
    <script th:inline="javascript">
        function closeItem() {
            var index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);
        }
        
        // 复制到剪贴板功能
        function copyToClipboard(text) {
            if (!text) return;
            
            // 创建临时的文本区域元素
            const textarea = document.createElement('textarea');
            textarea.value = text;
            document.body.appendChild(textarea);
            textarea.select();
            
            try {
                // 尝试执行复制命令
                const successful = document.execCommand('copy');
                if (successful) {
                    // 显示成功提示
                    parent.layer.msg('复制成功', {icon: 1, time: 1000});
                } else {
                    parent.layer.msg('复制失败，请手动复制', {icon: 2, time: 2000});
                }
            } catch (err) {
                parent.layer.msg('复制失败，请手动复制', {icon: 2, time: 2000});
            }
            
            // 移除临时元素
            document.body.removeChild(textarea);
        }
        
        // 为所有复制按钮添加点击事件监听器
        document.addEventListener('DOMContentLoaded', function() {
            const copyButtons = document.querySelectorAll('.copy-btn');
            copyButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const textToCopy = this.getAttribute('data-text');
                    copyToClipboard(textToCopy);
                });
            });
        });
    </script>
    <style>
        /* 项目负责人样式 */
        .project-leader {
            background-color: #fffbf0;
            border-left: 4px solid #f0ad4e;
            margin-bottom: 8px;
            padding-left: 8px;
        }
        
        .project-leader .member-item {
            border-radius: 0 4px 4px 0;
        }
        
        .leader-badge {
            position: absolute;
            top: -5px;
            right: -5px;
            font-size: 10px;
            padding: 2px 4px;
            border-radius: 3px;
        }
        
        .member-avatar {
            position: relative;
            display: inline-block;
        }
        
        /* 普通成员样式 */
        .project-member {
            margin-bottom: 8px;
        }
        
        /* 负责人图标动画效果 */
        .project-leader .fa-user-circle {
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
        
        /* 突出显示负责人名称 */
        .project-leader .member-info strong {
            color: #d58512;
            font-weight: 600;
        }
        
        .project-leader .member-info small {
            color: #f0ad4e;
            font-weight: 600;
        }
    </style>
</body>
</html>